<template>
  <div class="evaluation-info-page">
    <h2>评估信息</h2>

<!-- 搜索栏 -->
<div class="search-bar">
  <el-form :inline="true" size="small">
    <el-row :gutter="10"> <!-- 添加行容器 -->
      <el-col :span="4"> <!-- 增加列宽 -->
        <el-form-item label="检测状态">
          <el-select v-model="search.auditStatus" class="filter-select" placeholder="全部">
            <el-option label="全部" value="" />
            <el-option label="待审核" :value="0" />
            <el-option label="审核通过" :value="1" />
            <el-option label="审核不通过" :value="2" />
          </el-select>
        </el-form-item>
      </el-col>
      <el-col :span="3"> <!-- 增加列宽 -->
        <el-form-item>
          <el-button type="primary" @click="loadData">搜索</el-button>
        </el-form-item>
      </el-col>
    </el-row>
  </el-form>
</div>

    <!-- 表格 -->
    <el-table :data="tableData" border style="width: 100%">
      <el-table-column prop="id" label="ID" width="80" />
      <el-table-column prop="equipmentTypeBrand" label="设备类型-品牌" width="150" />
      <el-table-column prop="evaluationInfo" label="评估信息" width="250">
        <template #default="{ row }">
          <div v-html="row.evaluationInfo"></div>
        </template>
      </el-table-column>
      <el-table-column prop="workVolume" label="方量" width="120" />
      <el-table-column prop="year" label="出厂年份" width="100" />
      <el-table-column prop="userName" label="用户名(UID)" width="180" />
      <el-table-column label="审核状态" width="120">
        <template #default="{ row }">
          <el-tag :type="getStatusTagType(row.auditStatus)">
            {{ getStatusText(row.auditStatus) }}
          </el-tag>
        </template>
      </el-table-column>
      <el-table-column label="操作" width="200">
        <template #default="{ row }">
          <!-- 审核按钮 - 只有待审核状态才显示 -->
          <el-button 
            v-if="row.auditStatus === 0" 
            type="primary" 
            size="small" 
            @click="handleAudit(row)"
          >
            审核
          </el-button>
          <el-button 
            type="info" 
            size="small" 
            @click="viewDetail(row)"
          >
            详情
          </el-button>
        </template>
      </el-table-column>
    </el-table>

    <!-- 分页 -->
    <el-pagination
      :current-page="pageNum"
      :page-sizes="[10, 20, 50]"
      :page-size="pageSize"
      layout="total, sizes, prev, pager, next, jumper"
      :total="total"
      @size-change="handleSizeChange"
      @current-change="handleCurrentChange"
    />

    <!-- 审核对话框 -->
    <el-dialog 
      title="审核资质" 
      v-model="auditDialogVisible" 
      width="500px"
      class="audit-dialog"
    >
      <el-form :model="auditForm" ref="auditFormRef" label-width="100px">
        <el-form-item label="审核结果">
          <el-radio-group v-model="auditForm.auditStatus">
            <el-radio :label="1">通过</el-radio>
            <el-radio :label="2">拒绝</el-radio>
          </el-radio-group>
        </el-form-item>
        <el-form-item label="审核备注" prop="auditRemark">
          <el-input 
            v-model="auditForm.auditRemark" 
            type="textarea" 
            :rows="4"
            placeholder="请输入审核备注（拒绝时必填）"
            maxlength="200"
            show-word-limit
          ></el-input>
        </el-form-item>
      </el-form>
      <template #footer>
        <span class="dialog-footer">
          <el-button @click="auditDialogVisible = false">取消</el-button>
          <el-button type="primary" @click="submitAudit">确定</el-button>
        </span>
      </template>
    </el-dialog>

    <!-- 详情对话框 -->
    <el-dialog 
      title="评估详情" 
      v-model="detailDialogVisible" 
      width="600px"
      class="detail-dialog"
    >
      <el-scrollbar max-height="500px">
        <el-form label-width="120px" class="detail-form">
          <el-row :gutter="20">
            <el-col :span="12">
              <el-form-item label="ID：">
                {{ currentRow.id }}
              </el-form-item>
            </el-col>
            <el-col :span="12">
              <el-form-item label="设备类型-品牌：">
                {{ currentRow.equipmentTypeBrand }}
              </el-form-item>
            </el-col>
          </el-row>
          <el-row :gutter="20">
            <el-col :span="12">
              <el-form-item label="方量：">
                {{ currentRow.workVolume }}
              </el-form-item>
            </el-col>
            <el-col :span="12">
              <el-form-item label="出厂年份：">
                {{ currentRow.year }}
              </el-form-item>
            </el-col>
          </el-row>
          <el-form-item label="评估信息：">
            <div v-html="currentRow.evaluationInfo"></div>
          </el-form-item>
          <el-form-item label="用户名(UID)：">
            {{ currentRow.userName }}
          </el-form-item>
          <el-form-item label="审核状态：">
            <el-tag :type="getStatusTagType(currentRow.auditStatus)">
              {{ getStatusText(currentRow.auditStatus) }}
            </el-tag>
          </el-form-item>
        </el-form>
      </el-scrollbar>
      <template #footer>
        <span class="dialog-footer">
          <el-button @click="detailDialogVisible = false">关闭</el-button>
        </span>
      </template>
    </el-dialog>

  </div>
</template>

<script setup>
import httpInstance from '@/utils/http';
import { ref, reactive, computed, onMounted } from 'vue';
import { ElMessage, ElMessageBox, ElDialog } from 'element-plus';

// 状态管理
const pageNum = ref(1);
const pageSize = ref(10);
const total = ref(0);
const tableData = ref([]);

// 审核相关
const auditDialogVisible = ref(false);
const auditForm = reactive({
  auditStatus: 1,
  auditOpinion: ''
});

// 搜索条件
const search = reactive({
  auditStatus: '',
  category: '',
  uid: ''
});

// 当前行数据
const currentRow = ref({});

// 详情对话框
const detailDialogVisible = ref(false);

// 查看详情
const viewDetail = (row) => {
  currentRow.value = row;
  detailDialogVisible.value = true;
};

// 加载数据
const loadData = async () => {
  try {
    const res = await httpInstance.post(`/eduservice/detectionReport/page/${pageNum.value}/${pageSize.value}`, search);
    const data = res.data;
    tableData.value = data.list || [];
    total.value = data.total;
  } catch (err) {
    console.error('加载失败:', err);
  }
};

// 分页事件
const handleSizeChange = (val) => {
  pageSize.value = val;
  loadData();
};

const handleCurrentChange = (val) => {
  pageNum.value = val;
  loadData();
};

// 审核相关方法
const handleAudit = (row) => {
  // 重置表单
  auditForm.reportId = row.reportId;
  auditForm.auditStatus = row.auditStatus;
  auditForm.auditRemark = '';
  auditDialogVisible.value = true;
};

// 提交审核
const submitAudit = async () => {
  if (auditForm.auditStatus === 2 && !auditForm.auditRemark.trim()) {
    ElMessage.warning('审核不通过时必须填写备注')
    return
  }
  
  try {
    await httpInstance.put(`/eduservice/detectionReport/audit`, {
      reportId: auditForm.reportId,
      auditStatus: auditForm.auditStatus,
      auditRemark: auditForm.auditRemark
    })
    ElMessage.success('审核成功')
    auditDialogVisible.value = false
    fetchData()
  } catch (error) {
    ElMessage.error('审核失败')
    console.error(error)
  }
}

// 状态文本转换
const getStatusText = (status) => {
  switch (status) {
    case 0: return '待审核';
    case 1: return '审核通过';
    case 2: return '审核不通过';
    default: return '未知状态';
  }
};

// 状态标签样式
const getStatusTagType = (status) => {
  switch (status) {
    case 0: return 'info';
    case 1: return 'success';
    case 2: return 'danger';
    default: return '';
  }
};

// 初始化
onMounted(() => {
  loadData();
});
</script>

<style scoped>
/* 搜索框样式 */
.search-bar {
  margin-bottom: 20px;
  background: white;
  padding: 15px;
  border-radius: 4px;
  box-shadow: 0 1px 3px rgba(0,0,0,.1);
}

.filter-select {
  width: 150px;
}

/* 表单项标签样式 */
.el-form-item__label {
  font-size: 12px;
  color: #606266;
  padding: 0;
}

/* 按钮样式 */
.el-button {
  padding: 8px 16px;
  font-size: 12px;
}
.evaluation-info-page {
  padding: 20px;
  background-color: #f9f9f9;
}

.search-bar {
  margin-bottom: 20px;
  background: white;
  padding: 15px;
  border-radius: 4px;
  box-shadow: 0 1px 3px rgba(0,0,0,.1);
}

.el-table {
  margin-top: 10px;
  background: white;
  border-radius: 4px;
  box-shadow: 0 1px 3px rgba(0,0,0,.1);
}

.el-pagination {
  margin-top: 20px;
  text-align: right;
}

/* 操作列按钮间距 */
:deep(.el-table-column:last-child .el-button) {
  margin-right: 5px;
}

/* 详情对话框样式 */
.detail-dialog :deep(.el-dialog__body) {
  padding: 20px;
}

.detail-form .el-form-item {
  margin-bottom: 15px;
}
</style>